#app {
  .el-menu--collapse .el-menu .el-submenu {
    min-width: $sideBarWidth !important;
  }

  // mobile responsive
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform 0.28s;
      width: $sideBarWidth !important;
    }

    &.hideSidebar {
      .sidebar-container {
        pointer-events: none;
        transition-duration: 0.3s;
        transform: translate3d(-$sideBarWidth, 0, 0);
      }
    }
  }

  .withoutAnimation {
    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}

// when menu collapsed
// .el-menu--vertical {
//   & > .el-menu {
//     .svg-icon {
//       margin-right: 16px;
//     }
//   }

//   .nest-menu .el-submenu > .el-submenu__title,
//   .el-menu-item {
//     &:hover {
//       // you can use $subMenuHover
//       background-color: $menuHover !important;
//     }
//   }

//   // the scroll bar appears when the subMenu is too long
//   > .el-menu--popup {
//     max-height: 100vh;
//     overflow-y: auto;

//     &::-webkit-scrollbar-track-piece {
//       background: #d3dce6;
//     }

//     &::-webkit-scrollbar {
//       width: 6px;
//     }

//     &::-webkit-scrollbar-thumb {
//       background: #99a9bf;
//       border-radius: 20px;
//     }
//   }
// }
